<body>
	<style>
		#foo {
			margin-bottom: 3000px;
		}
	</style>

	<div id="foo">
		<span class="bar">test</span>
	</div>

	<script src="/static/jquery-2.1.1.min.js"></script>
	<script>
		$(function() {
			var $node = $('#foo .bar');

			$node.
				// DOM write
				css({
					color: 'red',
					background: 'green'
				}).
				// event bind
				click(function() {
					$(this).parent().css({'background-color': 'blue'});
				}).
				load(function() {
					// foo
				});

			// DOM read
			console.log($node.css('color'));

			// trigger an event (via jQuery)
			$node.trigger('click');

			// trigger an event (via core JS)
			// @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill
			var ev = document.createEvent('CustomEvent');
			ev.initCustomEvent('click');
			$node[0].dispatchEvent(ev);

			// scroll events
			$(window).add(document).scroll(function(ev) {
				console.log(ev);
			});
		});

		$(window).load(function() {
			console.log('window loaded');
		});
	</script>
</body>
